<!DOCTYPE html>
<html>

<head>
    <title>{{ authTexts.bindOtp.bindOtp }}</title>
    <link href="{{ cssUrl }}" rel="stylesheet">
    <link rel="icon" type="image/x-icon" href="{{ faviconUrl }}"></link>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
        .button-primary {
            background-color: {{ backgroundColor }}
        }
    </style>
</head>
<body class="bg-gray-300" style="font-family:Roboto">
      <div class="w-full mx-10 h-screen flex items-center justify-center">
        <div class="w-full md:w-1/3 bg-white rounded-lg py-4">
          <div class="flex mb-4 ml-8 justify-between">
            <h2 class="border-b-2 border-red-300 text-2xl text-center text-red-700">
              {{ authTexts.bindOtp.bindOtp }}
            </h2>
            <form action="{{ otpBasePath }}/bind" method="get">
              <button type="submit" name="action" value="backToLoginUI" class="text-x text-gray-500 mr-4">
                {{ authTexts.bindOtp.returnLogin }}
              </button>
              <input type="hidden" name="callbackUrl" value="{{ callbackUrl | escape }}">
            </form>
          </div>
        {% unless bindLimitMinutes %}
        <form class="w-full" method="post" action="{{ otpBasePath }}/bind">
          <div class="px-8">
            <div class="w-full mb-4">
              <div class="flex items-center">
                <input type='text' name="username" placeholder="{{ authTexts.bindOtp.userName }}" required
                    class="-mx-2 px-8  w-full border rounded py-2 text-gray-700 focus:outline-none" />
              </div>
            </div>
            <div class="w-full mb-4">
              <div class="flex items-center">
                <input name="password" placeholder="{{ authTexts.bindOtp.password }}" type="password" required
                    class="-mx-2 px-8 w-full border rounded px-3 py-2 text-gray-700 focus:outline-none" />
              </div>
            </div>
          </div>
          {% if err %}
          <div>
            <p class="my-4 text-center text-red-600">{{ authTexts.bindOtp.invalidUserNamePassword }}</p>
          </div>
          {% endif %}
          <div class="flex justify-center">
            <button type="submit" name="action" value=""
              class="w-1/3 py-2 rounded-full button-primary text-gray-100 focus:outline-none">
                {{ authTexts.bindOtp.confirm }}
            </button>
          </div>
          <input type="hidden" name="callbackUrl" value="{{ callbackUrl | escape }}">
        </form>

        {%  else %}
        {% if tokenNotFound %}
        <div class="w-full mt-8 mb-8 justify-center items-center">
          <p class="text-center text-xl text-red-700"> {{ authTexts.bindOtp.expiredUserInfo }} </p>
        </div>
        {% else %}

        <form class="w-full flex flex-wrap" method="post" action="{{ otpBasePath }}/sendEmail">
          <div class="w-full mb-8 ml-8 justify-between">
            <p class="mt-1">{{ authTexts.bindOtp.bindLimit1 }}{{ bindLimitMinutes }}{{ authTexts.bindOtp.bindLimit2 }}</p>
          </div>
          <div class="w-full overflow-x-scroll">
            <div class="flex w-full mb-4 items-center justify-between">
              <div class="flex-grow">
                <p class="border-b-2 ml-8">{{ authTexts.bindOtp.email }}({{ emailAddress }})</p>
              </div>
              <div>
                <button type="submit" name="action" value="requestValidationMessage"
                  class="mr-1 text-sm py-1 px-1 rounded-full button-primary text-gray-100 focus:outline-none">
                  {{ authTexts.bindOtp.getBindLink }}
                </button>
              </div>
            </div>
            {% if sendSucceeded == true%}
            <div class="flex items-center justify-between mb-4 mt-6">
            <p class="ml-8"> {{ authTexts.bindOtp.bindLinkSended }} </p>
            </div>
            {% elsif sendSucceeded == false%}
            <div class="flex items-center justify-between mb-4 mt-6">
              <p class="ml-8" id="countdown"> {{ authTexts.bindOtp.bindLinkFailed1 }}{{ timeDiffNotEnough }}{{ authTexts.bindOtp.bindLinkFailed2 }} </p>
            </div>
            {% elsif timeDiffNotEnough %}
              <div class="flex items-center justify-between mb-4 mt-6">
              <p class="ml-8 text-red" id="countdown"> {{ authTexts.bindOtp.bindRequestError1 }}{{ timeDiffNotEnough }}{{ authTexts.bindOtp.bindRequestError2 }} </p>
              </div>
            {% endif %}
            {% endif %}
            {% if timeDiffNotEnough %}
            <script>
              window.onload = function () {
                var count = {{ timeDiffNotEnough }}
                var countDownElement = document.getElementById("countdown")
                var countdown = setInterval(function() {
                  count--;
                  if (count < 0.5) {
                    clearInterval(countdown);
                    countDownElement.innerHTML = "{{ authTexts.bindOtp.reRequestLink }}";
                  } else {
                    countDownElement.innerHTML = countDownElement.innerText.replace(/\d+/, count);
                  }
                }, 1000);
              }
            </script>
            {% endif %}
          </div>
          <input type="hidden" name="otpSessionToken" value="{{ otpSessionToken }}" />
          <input type="hidden" name="emailAddress" value="{{ emailAddress }}" />
          <input type="hidden" name="callbackUrl" value="{{ callbackUrl | escape }}">
        </form>
        {% endunless %}
        </div>
      </div>
      <p class="absolute bottom-0 w-full text-center my-4 text-gray-500 text-sm ">
        {{ footerText }}
      </p>
</body>
</html>
